import React, { Component } from "react"
import "./index.css"
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css';
import "../../assets/font-awesome-4.7.0/css/font-awesome.min.css"
class Header extends Component {
    render() {
        return (
            <div className="head">
                <div className="swiper-container">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide"><img src="./images/banner_01.jpg"/></div>
                        <div className="swiper-slide"><img src="./images/banner_02.jpg"/></div>
                        <div className="swiper-slide"><img src="./images/banner_03.jpg"/></div>

                    </div>
                    {/* <!-- Add Pagination --> */}
                    <div className="swiper-pagination"></div>
                </div>
            <div className="title">
            <ul>
                <li><i className="fa fa-volume-up"></i> <a href="#">只配送深圳地区，16点前下单第二天送货，16点后下单隔天送货</a></li>
            </ul>
            </div>
            </div>
        )
    }
    componentDidMount() {
        var swiper = new Swiper('.swiper-container', {
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            }
        });
    }
}
export default Header